昨天跟大家初步地分享了 Cypress 怎麼安裝、 Cypress 的資料夾結構 、 Cypress Test Runner 有哪些功能、和 Cypress 提供的強大 Dashboard 的服務之後，大家有試著自己玩玩看嗎？
今天我想要分享給大家的是 Cypress 在執行測試時提供的功能。
可能有人會覺得，執行測試就執行測試，哪有什麼功能好分享的？
別急，且聽我娓娓道來。
昨天介紹到這個 Test Runner 開啟的小視窗，我們可以直接點擊列表中的某個檔案來執行該檔案的測試。
今天我們就來先點擊第一個 todo.spec.js 以執行這個檔案的測試，點擊該檔案之後你會發現， Cypress 用你所指定的瀏覽器打開了一個視窗，接著大家會看到這個畫面：
Cypress 咻咻咻地就把事情做完了，是不是超快的？！
沒錯，Cypress Test Runner 後來開的這個瀏覽器裡面其實是有玄機的，他不僅僅只是把結果顯示出來而已。
Cypress Test Runner 後來開的這個瀏覽器裡其實是一個互動介面，右邊這個區塊是實際受測的頁面，官方將其稱作為 AUT。
這個畫面不僅僅只是顯示而已，它是真實的頁面，所以我們一樣可以打開控制台、檢查元素與查看 CSS 設定。
不過 Cypress 其實是使用 iframe 的方式將其嵌在這個互動介面裡，也因此可能會遇到一些問題，官方有將可能的問題統整在這個文件裡，大家如果有遇到類似的問題可以到這個文件裡查詢。
而如果測試的語法有誤，它也會直接將錯誤訊息顯示在同一個地方：
在 AUT 的上方的網址列顯示的是當然是 AUT 的網址，不過該網址列是不能輸入的，點擊只會直接開新頁面以瀏覽該網頁而已。
右上方所顯示的則是當前這個 AUT 所使用的視窗大小，單位是 px 。
而大小旁邊的 % 數指的是當前我們所看到的大小是實際受測大小的縮放比例。
如果想知道更多細節的話可以直接點它，它會跟你說要怎麼設置：
再來要介紹的是一個非常好用的功能，在網址列左方有一顆 icon 是準心的按鈕：
點下去之後會出現這一列工具列：
並且整個 AUT 會進入一個像是平常我們滑鼠右鍵檢查元素的模式，只要我們鼠標指到 AUT 任一元素上面，該元素就會變成藍色，並且會有個小小的 tooltip 跟你說這個元素的 CSS Selector 是什麼：
點擊下去之後你會發現，上面的輸入框會變成你剛剛點擊的元素的 CSS Selector ：
這時我們可以點選右邊的複製按鈕以直接複製 cy.get('[data-test=new-todo]') 這一串文字：
而複製按鈕旁邊的按鈕叫做 Print to console ：
點擊這顆按鈕可以將被選取元素的資訊印到控制台裡面，印出來的資料長得會像是這樣：
輸入框左邊的 cy.get 其實是可以切換的，點擊它會出現另外一個選項 cy.contains ：
cy.contains 的功用是透過直接比對元素內是否有該字串來找尋元素，我們如果直接在輸入框輸入 Walk ，就會看到 Cypress 直接幫我們選取了 Walk the dog 這個代辦事項的元素：
而輸入框右邊的數字也會讓我們知道該選擇器一共選取到了多少個元素：
是不是非常地方便？我覺得這個工具會讓我們在撰寫測試案例的時候輕鬆許多，尤其如果你是需要撰寫 E2E 測試的 QA ，這個工具對你的幫助真的非常巨大，再也不用纏著前端工程師問該元素要怎麼選取，直接用這個工具就能輕鬆搞定！
而且這個工具所提供的 CSS Selector 可是有玄機在裡頭的！
Cypress 預設會照著以下順序的優先權來提供 CSS Selector 給我們：
data-cy
data-test
data-testid （ i 真的是小寫！，不是我打錯噢！）id
class
tag 名稱（該元素的名稱，如 input 、 div ）nth-child
因此，只要該元素有優先權比較高的選擇器，不用擔心你會得到像是 div > div > div > div > p 之類的 CSS Selector ，只要前端工程師在開發時有加上高優先權選取器，都會有著事半功倍的效果。
講到這裡其實一定會有人擔心：這樣不就要每個元素都加？這樣不就會需要加很多？
其實:
謎之聲：不然你來寫 E2E 測試阿？！
不過這個優先權，官方其實是有提供 API 以供我們在有需要的時候加以調整，雖然我覺得並不是很必要，但有需要的人可以參考官方的 Selector Playground API 文件。
而基於這個優先權，官方也提供 Best Practice Guide - Selecting Elements 給大家，希望大家未來在實作時能盡量照這個方式實作。
接下來是左半邊的重點 ─ Command Log ：
同樣地，這邊所顯示的東西也不僅僅只是單純的顯示結果，它一樣是個可以互動的介面。
上方藍色的連結是受測檔案的位置，我們可以直接點擊它， Cypress 會幫我們用我們設定的 File Opener 來打開它。
如果想知道怎麼設定 File Opener 的話，我昨天其實有介紹過，大家可以回頭看一下昨天的文章。
圖中列表裡，黑字且可點擊收合的項目，是我們在 .spec.js 裡所寫的 describe 或是 context 。
context在 cypress 裡的功用與describe等同，唯一不同的大概就是在語意上，官方範例中的context會在describe，但describe不會在context裡。
而每個前面有勾勾 icon 的項目，則是我們在 .spec.js 裡所寫的每一個 it ，也就是每一個測試案例。
點擊任一個測試案例後，我們可以在它展開的區塊中看到該測試案例的所執行的 Command ：
而且你會發現，Cypress 還會告訴你這些 Command 是在 before 、 beforeEach 、 afterEach 和 after 這些 Hooks 中執行的，還是在 it 中執行的（ TEST BODY 指的就是在 it 中執行的 Command ）：
此外，當我們的滑鼠游標滑到任一 Command 上，或是點擊任一 Command 時， Cypress 會直接幫我們還原在執行該 Command 時，頁面當前的狀況（ DOM Snapshot ）：
就像坐上了時光機一樣！
Cypress 預設會幫我們每個測試案例都保留 50 筆的 DOM Snapshot 以供我們進行時空旅行。
不過一旦測試案例一多，這其實是件很吃記憶體的事情。
因此， Cypress 也有提供設定讓我們可以調整保留的筆數，透過在 cypress.json 或者是 cypress.env.json 將 numTestsKeptInMemory 調小即可。
想調大當然也是沒有問題的！（笑）
還有，大家有沒有發現在滑鼠游標滑過每一個 Command 的時候，每一行 Command 開頭的數字會變成一顆圖釘？
這是因為 Cypress 有提供釘選的功能。
當我們想透過時空旅行去觀看某一個 Command 執行時的狀況，除了將滑鼠游標滑到該 Command 上之外，點擊該 Command 會將當前 AUT 的內容釘選在當下的那個狀況：
同時， Cypress 也會幫我們資訊印出來，以供我們使用：
如果覺得藍藍的很礙事，我們可以點擊這顆按鈕把它關掉：
如果要恢復則再點擊一次即可。
而如果要解除釘選，則可以按旁邊這顆按鈕：
也可以透過再次點擊當前釘選的 Command 或者是釘選其他的 Command 來解除對當前 Command 的釘選。
此外，如果釘選到的 Command 是有狀態切換效果的，像是 Checkbox 、 Radio button ，還會有 Before / After 的 Toggle Button ：
如此一來我們就可以知道在該行 Command 執行完之後，狀態有沒有如我們所預期的改變：
最後，則是左上方的這個 Status Menu。
最左邊 < Test 的部分按下去之後，會把一開始的那個小視窗叫出來，這時我們可以再選擇其他的測試檔案來執行。
不過 Cypress 在這個模式下，一次只能執行一個檔案噢！
而旁邊這個勾勾跟叉叉應該不用我說大家應該都知道，是指通過測試跟沒通過測試的數量，右邊那個灰色圈圈則是指略過的測試數量。
再旁邊的數字則是執行完這個檔案的所有測試所耗費的時間，相信大家也都知道。
右邊這個橘色有上下箭頭的 icon ，可以用來切換在執行測試時，如果測試案例已經長到超過螢幕高度，是否要自動 Scroll 的功能：
最右邊的則是是重新執行所有測試案例的按鈕，沒什麼特別的：
不過，其實還有一個小秘密不知道大家有沒有發現，其實 View All Test 跟 Disabled Auto-scrolling 和 Run All Tests 這三個按鈕是有快捷鍵的！
雖然不是什麼大不了的事情，但我覺得 Cypress 在很多小細節都很細心、很貼心，所以 Cypress 這個 E2E 自動化測試工具才會這麼好用！
今天的重點主要是想讓大家清楚地知道和了解這個 Cypress Test Runner 提供了些什麼功能，相信之後在後續使用 Cypress 寫 E2E 測試的時候，大家會比較知道怎麼 debug 、或者是比較知道我在做什麼，而且使用上也一定會比較熟悉且順手。
明天我們就要開始正式用 Cypress 寫 E2E 測試囉，敬請期待！
如果有任何的問題或是回饋，還請麻煩留言給我讓我知道，感謝大家！
iThome鐵人賽
看影片追技術